<script setup>
import { useAppStore, useUserStore } from "@/store";
import { ref, computed } from "vue";
import { isTest } from "@/utils/host";
import { getToken } from "@/utils/auth";
import projectConfig from "@/config/project";
import Toast from "@vant/weapp/dist/toast/toast";

const appStore = useAppStore();
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

const agentUrl = computed(() => {
  const url = ref("");
  if (appStore.siteInfo.siteDomain.indexOf("dev") >= 0) {
    url.value = encodeURIComponent(
      `https://${appStore.siteInfo.siteDomain
      }/agentdev/#/login?token=${getToken()}`
    );
  } else {
    url.value = encodeURIComponent(
      `https://${appStore.siteInfo.siteDomain
      }/agent/#/login?token=${getToken()}`
    );
  }
  return url.value;
});

// 前往渠道商
const toChannel = () => {
  let url = isTest
    ? "https://devmanage.topyunliu.com"
    : "https://manage.topyunliu.com";
  toWebView(url);
};

// 前往代理商
const requestAgent = async () => {
  if (!userInfo.value.isBindPhone) {
    return Toast.fail({
      message: "请先绑定手机号码",
      onClose() {
        uni.navigateTo({ url: "/pages/auth/index" });
      },
    });
  }
  await userStore.getUserInfo();
  if (userInfo.value.isAgent === 1) {
    return toWebView(agentUrl.value);
  } else {
    uni.navigateTo({ url: "/pages/agent/index" });
  }
};

function toWebView(url) {
  wx.navigateTo({
    url: `/pages/webview/index?url=${url}`,
  });
}

const toKeFu = () => {
  wx.openCustomerServiceChat({
    extInfo: {
      url: appStore.siteInfo.siteKefuUrl,
    },
    corpId: projectConfig.my.corpId,
  });
};
</script>

<template>
  <div class="topBox">
    <van-cell title="绑定微信/手机号" url="/pages/auth/index">
      <template #icon>
        <i class="iconfont ai-icon-Frame iconImg"></i>
      </template>
      <template #right-icon>
        <div style="font-size: 24rpx;color: var(--a-two-text-color);">{{ !userInfo.isBindPhone ? '未绑定' : '已绑定' }}
        </div>
      </template>
    </van-cell>

    <van-cell title="邀请码" is-link url="/pages/inviteFriends/index">
      <template #icon>
        <i class="iconfont ai-icon-yaoqingjiangli iconImg"></i>
      </template>
    </van-cell>

    <van-cell title="创作历史" is-link url="/pages/createdHistory/index">
      <template #icon>
        <i class="iconfont ai-icon-wodechuangzuo iconImg"></i>
      </template>
    </van-cell>

    <van-cell title="算力明细" is-link url="/pages/billingDetail/index">
      <template #icon>
        <i class="iconfont ai-icon-zhangdan2 iconImg"></i>
      </template>
    </van-cell>

    <van-cell title="我的账单" is-link url="/pages/fapiao/index">
      <template #icon>
        <i class="iconfont ai-icon-zhangdan1 iconImg"></i>
      </template>
    </van-cell>

    <van-cell title="前往渠道商" v-if="userInfo.realSiteId" is-link @click="toChannel">
      <template #icon>
        <i class="iconfont ai-icon-jiaocheng iconImg"></i>
      </template>
    </van-cell>

    <van-cell :border="false" v-if="projectConfig.agent(userInfo.level)"
      :title="userInfo.isAgent !== 1 ? '申请代理商' : '前往代理商'" is-link @click="requestAgent">
      <template #icon>
        <i class="iconfont ai-icon-dailishang iconImg"></i>
      </template>
    </van-cell>
  </div>

  <div class="btnBox">
    <van-cell title="设置" is-link url="/pages/setUp/index">
      <template #icon>
        <i class="iconfont ai-icon-shezhi iconImg"></i>
      </template>
    </van-cell>

    <van-cell title="公告" is-link url="/pages/noticeList/index?type=2">
      <template #icon>
        <i class="iconfont ai-icon-gonggao iconImg"></i>
      </template>
    </van-cell>

    <button open-type="contact" class="kefuBtn">
      <!-- <van-cell :border="false" title="联系客服" is-link @click="toKeFu"> -->
      <van-cell :border="false" title="联系客服" is-link>
        <template #icon>
          <i class="iconfont ai-icon-lianxikefu iconImg"></i>
        </template>
      </van-cell>
    </button>
  </div>
</template>

<style lang="less" scoped>
.topBox {
  margin-top: 20rpx;
}

.topBox,
.btnBox {
  border-radius: 30rpx;
  background-color: var(--a-main-box-bg-color);
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.btnBox {
  margin-top: 20rpx;
}

.iconImg {
  font-size: 40rpx;
  margin-right: 20rpx;
  color: var(--a-three-text-color);
}

.kefuBtn {
  background-color: transparent;
  border: none;
  padding: 0;
  text-align: left;

  &::after {
    border: none;
  }
}
</style>
